<template>
	<view class="body">
		<xk-header title="开票申请"></xk-header>
		<view class="util-bar">
			<view class="estate-box">
			<u--form
			labelPosition="left"
			:model="formdata"
			:rules="rules"
			ref="uviewForm"
			>
				<u-row customStyle="margin-bottom:15px">
					<u-col span="12"><view class="danhao-text">增值税发票开具类型：</view></u-col>
				</u-row>
				<!-- 增值税发票开具类型 -->
				<u-form-item
					label="公司类型:"
					:required = "true"
					prop="ticketType"
					borderBottom
					ref="ticketType"
					labelWidth="120"
				>
				<view :class="ticketType?'':'grey-t'" @click="type = true">{{ticketType?ticketType:'请选择公司类型'}}</view>
				</u-form-item>
				<u-picker :show="type" :columns="columns" @confirm="chose" @cancel="cancel"></u-picker>
				
				<u-form-item
					label="开票类型:"
					:required = "true"
					prop="ticketType"
					borderBottom
					ref="ticketType"
					labelWidth="120"
				>
				<view :class="ticketType2?'':'grey-t'" @click="type2 = true">{{ticketType2?ticketType2:'请选择开票类型'}}</view>
				</u-form-item>
				<u-picker :show="type2" :columns="columns2" @confirm="chose2" @cancel="cancel"></u-picker>
				
				<u-row customStyle="margin-bottom:10px;margin-top:15px;">
					<u-col span="12"><view class="danhao-text">增值税开票信息：</view></u-col>
				</u-row>
				<!-- 增值税开票信息 -->
				<u-form-item
					label="纳税人名称:"
					prop="invoice_name"
					borderBottom
					ref="invoice_name"
					labelWidth="120"
				>
				<u--input v-model="formdata.invoice_name" placeholder="请输入纳税人名称" border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="纳税人识别号:"
					:required = "true"
					prop="apply_payer_no"
					borderBottom
					ref="apply_payer_no"
					labelWidth="130"
				>
				<u--input v-model="formdata.apply_payer_no" placeholder="请输入纳税人识别号" border="none"></u--input>
				</u-form-item>
				
				<u-form-item
					label="联系电话:"
					prop="apply_phone"
					borderBottom
					ref="apply_phone"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_phone" placeholder="请输入联系电话" border="none"></u--input>
				</u-form-item>
				
				<u-form-item
					label="开户银行名称:"
					:required = "true"
					prop="apply_bank_name"
					borderBottom
					ref="apply_bank_name"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_bank_name" placeholder="请输入开户银行名称" border="none"></u--input>
				</u-form-item>
				
				<u-form-item
					label="开户银行账号:"
					:required = "true"
					prop="apply_bank_account"
					borderBottom
					ref="apply_bank_account"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_bank_account" placeholder="请输入开户银行账号" border="none"></u--input>
				</u-form-item>
				
				<u-form-item
					label="注册地址:"
					prop="apply_address"
					borderBottom
					ref="apply_address"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_address" placeholder="请输入注册地址" border="none"></u--input>
				</u-form-item>
				
				<u-row customStyle="margin-bottom:10px;margin-top:15px;">
					<u-col span="12"><view class="danhao-text">增值税电子发票接收人信息：</view></u-col>
				</u-row>
				<!-- 增值税电子发票接收人信息 -->
				<u-form-item
					label="手机号码:"
					:required = "true"
					prop="mobile"
					borderBottom
					ref="mobile"
					labelWidth="120"
				>
				<u--input v-model="formdata.mobile" placeholder="请输入手机号码" border="none"></u--input>
				</u-form-item>

				<u-form-item
					label="是否接收电子邮件:"
					:required = "true"
					prop="result"
					borderBottom
					ref="result"
					labelWidth="160"
				>
				<view style="width: 100%;height: 100%;display: flex;">
					<u-switch v-model="result" @change="chose1" space="0" size="25"></u-switch>
					<view style="margin-left:20rpx;margin-top: 6rpx;">{{result?'是':'否'}}</view>
				</view>
				</u-form-item>
				<u-form-item
					label="邮箱:"
					:required = "true"
					prop="apply_email"
					borderBottom
					ref="apply_email"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_email" :disabled="disable" placeholder="请输入邮箱" border="none"></u--input>
				</u-form-item>
				
				<!-- 申请信息 -->
				<u-row customStyle="margin-bottom:10px;margin-top:15px;">
					<u-col span="12"><view class="danhao-text">申请信息：</view></u-col>
				</u-row>
				<u-form-item
					label="客户名称:"
					prop="customer_name"
					borderBottom
					ref="customer_name"
					labelWidth="120"
				>
				<u--input v-model="formdata.customer_name" placeholder="请输入名称" border="none"></u--input>
				</u-form-item>
				
				<u-form-item
					label="费用类型:"
					prop="project_type"
					borderBottom
					ref="project_type"
					labelWidth="120"
				>
				<u--input v-model="formdata.project_type" placeholder="请输入费用类型" border="none"></u--input>
				</u-form-item>
				
				<u-form-item
					label="合计:"
					:required = "true"
					prop="apply_total"
					borderBottom
					ref="apply_total"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_total" placeholder="请输入合计金额" border="none"></u--input>
				</u-form-item>
				
				<!-- <u-form-item
					label="开票日期:"
					prop="apply_payer_name"
					borderBottom
					ref="apply_payer_name"
					labelWidth="120"
				>
				<view :class="tickOpenShwo?'':'grey-t'" @click="ticketTime = true">{{tickOpenShwo?tickOpenShwo:'请选择开票日期'}}</view>
				<u-calendar :show="ticketTime" @confirm="ChoseTickDate"></u-calendar>
				</u-form-item> -->
				
				<u-form-item
					label="费用开始时间:"
					prop="start_date"
					borderBottom
					ref="start_date"
					labelWidth="120"
				>
				<view :class="priceStart?'':'grey-t'" @click="priceStartTime = true">{{priceStart?priceStart:'请选择开始时间'}}</view>
				<u-calendar :show="priceStartTime" @confirm="priceStartDate"></u-calendar>
				</u-form-item>
				<u-form-item
					label="费用结束时间:"
					prop="end_date"
					borderBottom
					ref="end_date"
					labelWidth="120"
				>
				<view :class="priceEnd?'':'grey-t'" @click="priceEndTime = true">{{priceEnd?priceEnd:'请选择结束时间'}}</view>
				<u-calendar :show="priceEndTime" @confirm="priceEndDate"></u-calendar>
				</u-form-item>
				
				<u-form-item
					label="上传图片:"
					prop="apply_pic"
					borderBottom
					ref="apply_pic"
					labelWidth="85"
				>
				<upload-image :images="formdata.apply_pic" @onChange="(images) => { formdata.apply_pic = images }" />
				<!-- 	<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="10"
							width="80"
							height="80"
					></u-upload> -->
				</u-form-item>


				<u-form-item
					label="备注:"
					prop="apply_remark"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				</u-form-item>
				<u--textarea v-model="formdata.apply_remark" placeholder="请输入备注信息" height="50" count confirmType="done"></u--textarea>
			</u--form>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn btn" @click="doneSubmit">提交申请</view>
		</view>
		<view style="height:100px;"></view>

		<view v-if="invoicData.invoic_status != 10 || invoicData.invoic_status != 20 || invoicData.invoic_status != 30" class="common-bottom-view">
			<view class="common-btn" @click="subimtApply">申请</view>
		</view>
		<view v-if="invoicData.invoic_status == 10 || invoicData.invoic_status == 20 || invoicData.invoic_status == 30" class="common-bottom-view">
			<view class="common-btn" @click="applyUpdate">修改并提交</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>

import moment from 'moment'
import {formatImgPath} from '../../common/filter.js'
import config from '../../common/config.js'
import store from '@/store/index.js'

export default{
	data(){
		return{
			priceEndTime:false,
			priceEnd:"",
			priceStartTime:false,
			priceStart:"",
			ticketTime:false,
			tickOpenShwo:"",
			imgUrl:this.$config.BASE_imgUrl,
			chageIndex:'',
			particularsList:[],
			showDetailcard:false,
			loadingText:false,
			imagesData:'',
			imagesSrc:'',
			imageUrls: [],
			fileNames: [],
			invoicData:'',
			invoicId:'',
			fileList1:[],
			disable:this.result,
			i:0,
			urls: [
				'https://cdn.uviewui.com/uview/album/1.jpg',
				'https://cdn.uviewui.com/uview/album/2.jpg',
				'https://cdn.uviewui.com/uview/album/3.jpg',
				'https://cdn.uviewui.com/uview/album/4.jpg',
				'https://cdn.uviewui.com/uview/album/5.jpg',
				'https://cdn.uviewui.com/uview/album/6.jpg',
				'https://cdn.uviewui.com/uview/album/7.jpg',
				'https://cdn.uviewui.com/uview/album/8.jpg',
				'https://cdn.uviewui.com/uview/album/9.jpg',
				'https://cdn.uviewui.com/uview/album/10.jpg',
			],
			indexList: [],
			other:false,
			detailType:false,
			value: '',
			ticketType:"",
			ticketType2:"",
			result:true,
			detType:[],
			type: false,
			type2: false,
			columns: [
				['小规模纳税人(或个人)', '一般纳税人']
			],
			columns2: [
				['增值税专业发票', '增值税普通发票']
			],
			uploadImgs: ['/static/temp/temp.jpeg'],
			data: {},
			orderMore: true,
			defaultDate: moment().format('YYYY-MM-DD HH:mm'),
			urgency: [],
			urgencyMap: {},
			urgencyIndex: '',
			deviceInfo: '',
			scanInfo: '',
			notNull: {
				company_type: "请选择公司类型",
				apply_invoic_type : "请选择开票类型",
				apply_payer_no: "请填写纳税人识别号",
				apply_bank_name: "请填写开户银行名称",
				apply_bank_account: "请填写开户银行账号",
				mobile:"请填写手机号码",
				apply_email:"请填写邮箱",
				apply_total:"请输入合计金额"
			},
			rules: {
				'company_type': {
					type: 'string',
					required:true,
					message: '请选择公司类型',
					trigger:['blur','change']
				},
				'apply_invoic_type': {
					type: 'string',
					required:true,
					message: '请选择开票类型',
					trigger:['blur','change']
				},
				'apply_payer_no': {
					type: 'string',
					required:true,
					message: '请填写纳税人识别号',
					trigger:['blur','change']
				},
				'apply_bank_name': {
					type: 'string',
					required:true,
					message: '请填写开户银行名称',
					trigger:['blur','change']
				},
				'apply_bank_account': {
					type: 'string',
					required:true,
					message: '请填写开户银行账号',
					trigger:['blur','change']
				},
				'mobile': {
					type: 'string',
					required:true,
					message: '请填写手机号码',
					trigger:['blur','change']
				},
				'apply_email': {
					type: 'string',
					required:true,
					message: '请填写邮箱',
					trigger:['blur','change']
				},
				'apply_total': {
					type: 'string',
					required:true,
					message: '请输入合计金额',
					trigger:['blur','change']
				},
			},
			det:[{
				project_no: '',
				project_type: '',
				project_name: '',
				project_num: '1',
				project_price: '',
				remark: ''
			}],
			formdata:{
				apply_isemail:1,
				apply_pic:'',
				apply_remark:''
			},
		};
	},
	onLoad(options) {
		if(options.invoicId){
			console.log("options:",options)
			this.invoicId = options.invoicId
			if(options.result == 0 || options.result == 1){
				this.result = options.result
			}
			console.log("result:",this.result)
			console.log("修改or申请：",this.invoicId)
		}
		this.loadmore()
	},
	onShow() {
		if(this.invoicId){
			this.getMessage()
		}
	},
	methods:{
		//费用结束时间
		priceEndDate(e){
			this.priceEnd = e[0]
			this.priceEndTime = false
			this.formdata.end_date = e[0]
		},
		//费用开始时间
		priceStartDate(e){
			this.priceStart = e[0]
			this.priceStartTime = false
			this.formdata.start_date = e[0]
		},
		//选择开票日期
		ChoseTickDate(e){
			this.tickOpenShwo = e[0]
			this.ticketTime = false
		},

		//收款记录明细
		payDetail(){
			this.showDetailcard=true;
		},
		back(){
			uni.navigateBack()
		},

		//初始化选项框和按钮状态
		modify(){
			//赋值
			this.formdata = this.invoicData
			console.log("当前要修改的开票内容：",this.formdata)

			//初始化开票类型
			if(this.formdata.apply_invoic_type == 10){
				this.ticketType = "专票"
			}else if(this.formdata.apply_invoic_type == 20){
				this.ticketType = "普票"
			}else if(this.formdata.apply_invoic_type == 30){
				this.ticketType = "收据"
			}

			//初始化收录明细项目类型
			for(var i = 0;i < this.formdata.dets.length;i++){
				if(this.formdata.dets[i].project_type == 5){
					this.detType[i] = "租金"
				}else if(this.formdata.dets[i].project_type == 10){
					this.detType[i] = "管理费"
				}else if(this.formdata.dets[i].project_type == 15){
					this.detType[i] = "电费"
				}else if(this.formdata.dets[i].project_type == 20){
					this.detType[i] = "水费"
				}else if(this.formdata.dets[i].project_type == 25){
					this.detType[i] = "热水费"
				}else if(this.formdata.dets[i].project_type == 30){
					this.detType[i] = "空调冷量费"
				}else if(this.formdata.dets[i].project_type == 35){
					this.detType[i] = "空调热量费"
				}else if(this.formdata.dets[i].project_type == 40){
					this.detType[i] = "有偿服务费"
				}else if(this.formdata.dets[i].project_type == 45){
					this.detType[i] = "其他"
				}
			}

			//初始化按钮状态
			this.formdata.apply_isemail = this.invoicData.apply_isemail
			if(this.formdata.apply_isemail == 1){
				this.result = true
			}else if(this.formdata.apply_isemail == 0){
				this.result = false
			}
		},
		//获取数据
		getMessage(){
			this.$api.tickets_apply_detail(this.invoicId).then((res) => {
				console.log("表单信息：",res)
				this.invoicData = res.piInvoicData_getPiInvoic
				this.invoicData.apply_pic = ''
				console.log("当前状态：",this.invoicData.invoic_status)
				console.log("当前信息：",this.invoicData)
				this.det = this.invoicData.dets
				console.log("当前记录：",this.det)
				this.modify()
			})
		},


		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
			var arr = []
			var delet = []
			arr = this.formdata.apply_pic.split(';')
			delet = arr.splice(event.index, 1)
			this.formdata.apply_pic = arr.join(";")
			console.log("删除的图片：",delet)
			console.log("图片列表：",this.formdata.apply_pic)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			console.log("event:",event)
			console.log("测试1：",event.name)
			console.log("测试2：",event.file)
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			console.log("测试3：",fileListLen)
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			console.log("测试4：",fileListLen)
			for (let i = 0; i < lists.length; i++) {
				const result = await this.$util.uploadFilePromise(lists[i].url)
				this.$util.uploadFilePromise(lists[i].url).then((res) => {
					console.log("传过来的数据:",res.result)
					this.formdata.apply_pic += res.result + ";"
					console.log("健康码数组：",this.formdata.apply_pic)
				})
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},


		show(e){
			console.log("列表：",e)
			console.log("列表2：",this.formdata.dets)
		},
		back() {
			uni.navigateBack({
				delta: 1,
			})
		},
		valChange(e) {
			console.log('当前值为: ' + e.value)
		},

		scrolltolower() {
			this.loadmore()
		},
		loadmore() {
			for (let i = 0; i < 30; i++) {
				this.indexList.push({
					url: this.urls[uni.$u.random(0, this.urls.length - 1)]
				})
			}
		},
		change(e) {
		  console.log('change', e);
		},

		//弹窗取消按钮参数设置
		cancel(){
			this.type = false
		},
		//选择公司类型
		chose(e){
			this.ticketType = e.value[0]
			this.type = false
			console.log("开票类型：",e)
			if(this.ticketType == "小规模纳税人(或个人)"){
				this.formdata.company_type  = 10
			}else if(this.ticketType == "一般纳税人"){
				this.formdata.company_type  = 20
			}
			console.log(this.formdata.company_type )
		},
		//弹窗取消按钮参数设置
		cancel2(){
			this.type2 = false
		},
		//选择开票类型
		chose2(e){
			this.ticketType2 = e.value[0]
			this.type2 = false
			console.log("开票类型：",e)
			if(this.ticketType2 == "增值税专业发票"){
				this.formdata.apply_invoic_type = 10
			}else if(this.ticketType2 == "增值税普通发票"){
				this.formdata.apply_invoic_type = 20
			}
			console.log(this.formdata.apply_invoic_type)
		},

		//是否接受电子邮件
		chose1(e){
			console.log("rsult: ",this.result)
			console.log("是否接受电子邮件：",e)
			if(this.result == true){
				this.formdata.apply_isemail = 1
				// this.disable = false
			}else if(this.result == false){
				this.formdata.apply_isemail = 0
				// this.disable = true
			}
			console.log(this.formdata.apply_isemail)
		},

		//修改表单
		applyUpdate(){
			console.log("修改内容：",this.det)
			this.formdata.dets = this.det
			this.formdata.pi_invoic_id = this.invoicId
			this.formdata.isSubmit = true
			console.log("提交前结果：",this.formdata)
			this.$util.confirm({
				content: "确定修改开票申请？",
				confirmText: "确定"
			}).then(isConfirm => {
				if (isConfirm) {
					console.log("结果：",this.formdata)
					this.$util.post({
						url: "app/piInvoic/applyUpdate",
						data: this.formdata,
					}).then(res => {
						uni.redirectTo({
							url: '/pagesB/open-ticket/ticket-apply-finish?type=accept'
						})
					})
				}
			})
		},

		//提交表单
		subimtApply(){
			for (let item in this.notNull) {
				if (!this.formdata[item]) {
					this.$util.toast(this.notNull[item]);
					return;
				}
			}
			this.$util.confirm({
				content: "确定提交开票申请？",
				confirmText: "确定"
			}).then(isConfirm => {
				if (isConfirm) {
					console.log("结果：",this.formdata)
					this.$util.post({
						url: "app/piInvoic/apply",
						// url: "wx/invoic/apple"
						data: this.formdata,
					}).then(res => {
						uni.redirectTo({
							url: '/pagesB/open-ticket/ticket-apply-finish?type=apply'
						})
					})

				}
			})

		}
	},
}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.estate-box{
	background:#FFFFFF;
	padding:10px 10px 10px 10px;
	margin:10px;
	border-radius:6px;
}
.grey-t{
	color:#CCCCCC;
}
.loadText{
	padding:5px 0px 20px 0px;
}
.danhao-text{
	font-size:32rpx;
	font-weight:bold;
}
.wy-title{
	text-align: center;
	font-size:18px;
	padding:15px 0 15px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#f1f1f1;
	border-radius:8px 8px 0 0;
}
.wybox{
	padding:15px;
	margin:15px;
	background-color:#f8f8f8;
	font-size:28rpx;
	border-radius:8px;
}
.wy-left-text{
	color:#999999;
}
.wy-right-text{
	color:#000000;
	margin-left:5px;
}
.scroll-Y{
	max-height:60vh;
}
</style>
